/* eslint-disable no-param-reassign */
import { reactive } from 'vue'

export interface IFence {
  height: 1350 | 1850 | 2050
  width: 200 | 300 | 400 | 800 | 900 | 1000 | 1200 | 1400
  color: 'BLK' | 'YLW' | 'RAL7035' | 'RAL5017' | 'RAL3000' | 'RAL9016'
  spacing: number[]
  silk: string
}

export const Fence: IFence = {
  height: 1850,
  width: 1400,
  color: 'BLK',
  spacing: [25, 100],
  silk: '3.0'
}

export class FenceClass implements IFence {
  points: number[]

  angle: number

  height: 1350 | 1850 | 2050

  width: 200 | 300 | 400 | 800 | 900 | 1000 | 1200 | 1400

  color: 'BLK' | 'YLW' | 'RAL7035' | 'RAL5017' | 'RAL3000' | 'RAL9016'

  spacing: number[]

  silk: string

  constructor(
    points: number[] = [0, 0],
    angle: number = 0,
    height: 1350 | 1850 | 2050 = 1850,
    width: 200 | 300 | 400 | 800 | 900 | 1000 | 1200 | 1400 = 1000,
    color: 'BLK' | 'YLW' | 'RAL7035' | 'RAL5017' | 'RAL3000' | 'RAL9016' = 'BLK',
    spacing: number[] = [25, 100],
    silk: string = '3.0'
  ) {
    this.points = points
    this.angle = angle
    this.height = height
    this.width = width
    this.color = color
    this.spacing = spacing
    this.silk = silk
  }

  getName(): string {
    return `KKGD-${this.height}x${this.width}-${this.spacing[0]}x${this.spacing[1]}x${this.silk}-${this.color}`
  }

  getInfo() {
    return {
      model: this.getName(),
      type: `${this.height}x${this.width}`,
      color: this.color,
      spacing: `${this.spacing[0]}x${this.spacing[1]}x${this.silk}`
    }
  }

  static fromString(name: string) {
    const str = name.split('-')
    if (str.length !== 4) return null
    return {
      model: name,
      type: str[1],
      color: str[3],
      spacing: str[2]
    }
  }
}

export function createFence() {
  return reactive(Fence)
}

export function createFenceAction(fence: IFence) {
  return {
    updateHeigh: (height: 1350 | 1850 | 2050) => {
      fence.height = height
    },
    updateWidth: (width: 200 | 300 | 400 | 800 | 900 | 1000 | 1200 | 1400) => {
      fence.width = width
    },
    updateColor: (color: 'BLK' | 'YLW' | 'RAL7035' | 'RAL5017' | 'RAL3000' | 'RAL9016') => {
      fence.color = color
    },
    updateSpacing: (spacing: [25, 100]) => {
      fence.spacing = spacing
    },
    updateSilk: (silk: string = '3.0') => {
      fence.silk = silk
    }
  }
}
